<template>
  <view class="search-wrap">
    <view class="search-fixed" :class="{ fixed: props.fixed, trans: props.transparent }">
      <view class="search-box">
        <view class="search-box-inner">
          <view class="icon icon-search"></view>
          <view class="input">
            <input v-if="!props.url" @confirm="onSearch" confirm-type="search" :maxlength="30" :value="modelValue" @input="onInput" :placeholder="props.placeholder" />
            <view class="color-gray fill" @tap="router.push(props.url)" v-else>{{ props.placeholder }}</view>
          </view>
          <view v-if="modelValue" @tap="onClear" class="icon icon-close-circle-filled"></view>
        </view>
        <view class="s-btn" v-if="!props.url" @tap="onSearch">搜索</view>
        <view class="right-p" v-else></view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { useRouter } from '@/hooks';
import { View, Input } from '@tarojs/components';
import { getCurrentInstance, ref } from 'vue';

const props = defineProps({
  transparent: Boolean,
  placeholder: String,
  url: String,
  fixed: {
    type: Boolean,
    default: true
  }
});

const router = useRouter();
const modelValue = defineModel(String, { default: '' });

const emit = defineEmits(['search', 'clear']);

const onInput = e => {
  modelValue.value = e.detail.value;
};
const onClear = e => {
  modelValue.value = '';
  emit('clear', modelValue.value);
};
const onSearch = () => {
  emit('search', modelValue.value);
};
</script>
<style lang="scss">
.search-wrap {
  --height: 100px;
  height: var(--height);
  --bgcolor: var(--color-caption);
  --frcolor: var(--color-background);

  .search-fixed {
    width: 100%;
    height: var(--height);

    &.fixed {
      top: 0;
      left: 0;
      position: fixed;
    }
    &.trans {
      --bgcolor: transparent;
      --frcolor: var(--color-caption);
    }

    .search-box {
      height: var(--height);
      padding: 20px 0px 10px 20px;
      background-color: var(--bgcolor);
      display: flex;
      align-items: center;
      .search-box-inner {
        height: 100%;
        flex-grow: 1;
        background-color: var(--frcolor);
        padding: 0 20px 0 20px;
        position: relative;
        border-radius: 50px;
        .input {
          height: 100%;
          width: 100%;
          .fill {
            padding-left: 50px;
            font-size: 28px;
            height: 100%;
            width: 100%;
            line-height: calc(var(--height) - 30px);
          }
        }
        input {
          height: 100%;
          width: 100%;
          padding-left: 50px;
          font-size: 28px;
          &::placeholder {
            font-size: 28px;
            color: var(--color-gray);
          }
        }
        .icon {
          position: absolute;
          font-size: 40px;
        }

        .icon-search {
          left: 18px;
          top: calc(50% - 20px);
          color: var(--color-primary);
        }
        .icon-close-circle-filled {
          right: 8px;
          font-size: 30px;
          padding: 10px;
          z-index: 2;
          top: calc(50% - 25px);
          color: var(--color-default);
        }
      }
      .s-btn {
        flex-shrink: 0;
        width: 10;
        padding: 10px 20px;
        color: var(--color-primary);
      }
    }
    .right-p {
      padding-left: 20px;
    }
  }
}
</style>
